import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformTestRoute extends StatefulWidget {
  @override
  _TransformTestRouteState createState() => new _TransformTestRouteState();
}

class _TransformTestRouteState extends State<TransformTestRoute> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: Text('Transform'),
      ),
      body: new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
            // 所以无论对子widget应用何种变化，
            // 其占用空间的大小和在屏幕上的位置都是固定不变的

            //RotatedBox的变换是在layout阶段，会影响在子widget的位置和大小
            new Text(
              '平移',
              style: TextStyle(fontSize: 30.0),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              //默认原点为左上角，左移20像素，向上平移5像素
              child: Transform.translate(
                offset: Offset(-20.0, -5.0),
                child: Text("Hello world"),
              ),
            ),
            new Text(
              '旋转',
              style: TextStyle(fontSize: 30.0),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: Transform.rotate(
                //旋转90度
                angle: math.pi / 2,
                child: Text("Hello world"),
              ),
            ),
            new Text(
              '缩放',
              style: TextStyle(fontSize: 30.0),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: Transform.scale(
                scale: 1.5, //放大到1.5倍
                child: Text("Hello world"),
              ),
            ),
            new Text(
              'RotatedBox',
              style: TextStyle(fontSize: 30.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  //将Transform.rotate换成RotatedBox
                  child: RotatedBox(
                    quarterTurns: 1, //旋转90度(1/4圈)
                    child: Text("Hello world"),
                  ),
                ),
                Text("你好", style: TextStyle(color: Colors.green, fontSize: 20.0),)
              ],
            ),
          ],
        ),
      ),
    );
  }
}
